<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <script src="../node_modules/@vue/reactivity/dist/reactivity.global.js"></script>
    <div id="app"></div>
    <div id="app2"></div>
    <script>
      let { reactive, effect } = VueReactivity;
      let state = reactive({
        arr: [1, 2, 3],
        arr2: [1, 2, 3],
      });
      effect(() => {
        // 1、数组在模版中使用时，会经过JSON.stringify转译，会访问数组上的toString、join、、length、索引等属性，触发依赖收集
        app.innerHTML = state.arr;
      });
      setTimeout(() => {
        // 2、当数组在push操作的时候，会触发get操作，给(新的索引)位置,新增一个值，因为索引是新加的，没有依赖收集，所以需要通过数组的length触发effect更新视图
        state.arr.push(4);
      }, 3000);

      // ------------------------------------------
      effect(() => {
        // 1、如果模版中直接通过索引取值，只会触发当前的索引收集effect
        app2.innerHTML = state.arr2[2];
      });
      setTimeout(() => {
        // 2、当数组的length发生改变，数组中收集的索引比当前的length大，都需要出发effect更新视图
        state.arr2.length = 0;
      }, 3000);
    </script>
  </body>
</html>
